<template>
    <div class="account-setting">
        <i-card class="user-card">
            <div class="user">
                <div class="user__avatar">
                    <i-avatar class="avatar"  src="https://himg.bdimg.com/sys/portrait/item/ba0ce88296e585a8e69184e5bdb19592.jpg" size="default" />
                    <i-button size="small">修改头像</i-button>
                </div>
                <div class="user__info">
                    <i-form label-position="top">
                        <p class="title">基本信息</p>
                        <i-row>
                            <i-col span="6">
                                <i-form-item label="用户昵称：">
                                    <i-input></i-input>
                                </i-form-item>
                            </i-col>
                            <i-col span="6" offset="1">
                                <i-form-item label="姓名：">
                                    <i-input></i-input>
                                </i-form-item>
                            </i-col>
                        </i-row>
                        <i-row>
                            <i-col span="6">
                                <i-form-item label="邮箱：">
                                    <i-input></i-input>
                                     <a href="">修改邮箱</a>
                                </i-form-item>
                            </i-col>
                        </i-row>
                     <p class="title">修改密码</p>
                        <i-row>
                            <i-col span="6">
                                <i-form-item label="当前密码：">
                                    <i-input></i-input>
                                </i-form-item>
                            </i-col>
                            <i-col span="6" offset="1">
                                <i-form-item label="新密码：">
                                    <i-input></i-input>
                                </i-form-item>
                            </i-col>
                            <i-col span="6" offset="1">
                                <i-form-item label="确认密码：">
                                    <i-input></i-input>
                                </i-form-item>
                            </i-col>
                        </i-row>
                        <i-button type="info">确认修改</i-button>
                    </i-form>
                </div>
            </div>
        </i-card>
    </div>
</template>
<script>
export default {
    name: 'account-setting',
    data() {
        return {}
    }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/theme/index';
.accout-setting {
    font-size: 120px;
}
.user-card {
    padding: 20px 60px;
}
.user {
    display: flex;
    .title {
        font-weight: bold;
        font-size: 15px;
        margin-bottom: 26px;
    }
    .user__avatar {
        margin-right: 90px;
        text-align: center;
        .avatar {
            display: block;
            margin-bottom: 12px;
            width: 80px;
            height: 80px;
            border-radius: 9999px;
        }
    }
    .user__info {
        flex: 1;
        margin-top: 10px;
    }
}
</style>
